<template>
    <div class="advice">
        <el-row :gutter="-5" class="row_1">
            <el-col :span="6" class="col_1">
                <span>评价ID：</span>
                <el-input v-model="inputAdvice" placeholder="请输入评价ID" clearable style="width: 200px" clearable></el-input>
            </el-col>
            <el-col :span="5" class="col_2">
                <el-button type="primary" @click="searchAdvice">查询</el-button>
            </el-col>
        </el-row>

<!--        表格区域-->
        <el-table
                :data="adviceData"
                style="width: 100%"
                stripe
        clas="tableAdvice">
            <el-table-column
                    prop="id"
                    label="ID"
                    align="center"

            >
            </el-table-column>
            <el-table-column label="评价类型" align="center">
                <template v-slot="slot">
                    <el-tag type="success" v-if="slot.row.type==='0'">满意</el-tag>
                    <el-tag type="danger" v-else>投诉</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="user"
                    label="提交人"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="user_phone"
                    label="联系电话"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="提交时间"
                    align="center">
            </el-table-column>
            <el-table-column label="处理状态"
                             align="center">
                <template v-slot="slot">
                    <el-tag type="success" v-if="slot.row.status">已解决</el-tag>
                    <el-tag type="danger" v-else>未解决</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template v-slot="slot">
                    <el-tag type="danger" class="el-icon-delete" effect="dark" @click="adviceDelete(slot.row.id)">删除</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeAdvice"
                @current-change="handleCurrentAdvice"
                :current-page.sync="queryAdvice.page"
                :page-size="queryAdvice.limit"
                layout="total, prev, pager, next"
                :total="deatiles"
        background>

        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "advice",
        data(){
            return{
                queryAdvice:{
                    action:'',
                    page:1,
                    limit:5
                },
                adviceData:[],
                inputAdvice:'',
                deatiles:0


            }
        },
        created() {
            this.getAdviceData();
        },
        methods:{
            async getAdviceData(){
                const {data:res}=await this.$http.get("evaluate",{params:this.queryAdvice});
                if(res.code!==1){
                    return this.$message.error("查询失败");
                }
                // console.log(res);
                this.adviceData=res.result.data;
                this.deatiles=res.result.limitCount;


            },
            handleSizeAdvice(newSize){
                this.queryAdvice.limit=newSize;
                this.getAdviceData();

            },
            handleCurrentAdvice(newNum){
                this.queryAdvice.page=newNum;
                this.getAdviceData();
            },
            async adviceDelete(id){
                const confirmResult=await this.$confirm("此操作将永久删除该项，是否继续？","提示",{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                }).catch(err=>err);
                if(confirmResult!=="confirm"){
                    return this.$message.info("取消删除")
                }else{
                   this.$http.delete(`evaluate/${id}`).then(res=>{
                       if(res.data.code){
                           return this.$message.success("删除成功")
                       }
                   }).catch(err=>{
                       console.log(err);
                   });
                    this.getAdviceData();
                }

            },
            searchAdvice(){
                this.queryAdvice.action=this.inputAdvice;
                this.getAdviceData();

            }
        },


    }
</script>

<style lang="less" scoped>
    .advice{
        width: 100%;
        .tableAdvice{
            text-align: center;

        }
    }
    .row_1 {
        margin-left: 11px;
        /*background: blue;*/
        border-bottom: 2px solid #cccccc;

        .col_1 {
            margin: 15px 0 15px 20px;

            span {
                font-size: 13px;

            }
        }

        .col_2 {
            .col_1();
            margin-left: -50px;
            margin-right: 0;
        }
    }
    .el-table-column{
        text-align: center;
    }
    .el-pagination{
       text-align: center;
        margin-top: 15px;
    }
    .el-tag{
        cursor: pointer;
    }
    .el-table{
        padding-left: 10px;
    }
</style>
